<!-- 跳转链接组件 -->
<template>
	<div class="link-page">
		<el-cascader ref="cascaderRef" v-model="value" :options="options" :props="props" @change="handleChange">
			<template #default="{ node, data }">
				<span>{{ data.name }}</span>
				<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
			</template>
		</el-cascader>
		<el-tooltip class="box-item" effect="dark" :content="pageName" placement="top-start">
			<el-tag v-if="pageName" style="width: 215px; overflow: hidden"> {{ pageName }}</el-tag>
		</el-tooltip>
		<!-- 商品选择器 -->
		<selectGoods ref="selectGoodsRef" @currentRow="spuCurrent"></selectGoods>
		<!-- 微页面选择器 -->
		<selectPageDesign ref="selectPageDesignRef" @currentRow="diyCurrent"></selectPageDesign>

	</div>
</template>

<script lang="ts">
import { init } from 'echarts';
import { defineComponent, defineAsyncComponent, ref, watch } from 'vue';
import linkPage from './linkPage';
export default defineComponent({
	components: { selectGoods: defineAsyncComponent(() => import('/@/components/selectGoods/index.vue')), selectPageDesign: defineAsyncComponent(() => import('/@/components/selectPageDesign/index.vue')) },
	props: {
		pageUrl: {
			type: String,
			default: '',
		},
		pageName: {
			type: String,
			default: '',
		},
	},
	emits: ['linkPageCurrent'],
	setup(prop, { emit }) {
		const value = ref(['#', prop.pageUrl]);
		//配置项
		const props = {
			expandTrigger: 'hover',
			children: 'children',
			label: 'name',
			value: 'pageUrl',
		};
		const cascaderRef = ref();
		const selectGoodsRef = ref();
		const selectPageDesignRef = ref();
		// 页面路径
		const pageUrl = ref(prop.pageUrl);
		// 页面名称
		const pageName = ref(prop.pageName);
		// 选择跳转链接触发事件
		const handleChange = (value: any) => {
			let obj = cascaderRef.value.getCheckedNodes()[0].data;
			if (obj.showOpt) {
				// 详情页
				switch (obj.pageUrl) {
					case linkPage.goods_detail_url: //商品详情-打开商品选择器组件
						selectGoodsRef.value.dialog = true;
						break;
					case linkPage.coupon_detail_url: //优惠券详情-打开优惠券详情
						handleLinkPage(obj.pageUrl, obj.name);
						break;
					case linkPage.diy_page_url:
						selectPageDesignRef.value.dialog = true;
						break;
					default:
						handleLinkPage(obj.pageUrl, obj.name);
				}
			} else {
				handleLinkPage(obj.pageUrl, obj.name);
			}
		};
		// 商品选择器回调
		const spuCurrent = (row: any) => {
			if (row) {
				handleLinkPage(value.value[1] + row[0].id, row[0].name);
			}
		};
		const diyCurrent = (row: any) => {
			if (row) {
				handleLinkPage(value.value[1] + row[0].id, row[0].pageName);
			}
		}
		// 触发跳转链接回调
		const handleLinkPage = (url: string, name: string) => {
			pageUrl.value = url;
			pageName.value = name;
			emit('linkPageCurrent', { pageUrl: url, pageName: name });
		};
		// 数据源
		const options = ref(linkPage.page);
		// 初始化数据
		const initPage = () => {
			let page = value.value[1];
			if (page.indexOf("?id=") != -1) {
				value.value[1] = page.split("=")[0] + "=";
			}
		}
		watch(
			() => prop.pageUrl,
			(val) => {
				value.value[1] = val;
				pageName.value = prop.pageName;
				initPage();
			},
			{
				deep: true,
			}
		);
		initPage();
		return { cascaderRef, value, pageUrl, pageName, selectGoodsRef, selectPageDesignRef, props, options, handleChange, spuCurrent, diyCurrent };
	},
});
</script>

<style scoped lang="scss">
.link-page {
	// display: flex;
	// align-items: center;
}
</style>
